import React from 'react';
import { Modal, Table, Button, Space, message } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { CommentReply } from '@/types/comment';
import { deleteCommentReply } from '@/api/commentReplyController';

interface ReplyListModalProps {
  visible: boolean;
  onClose: () => void;
  replies: CommentReply[];
  onDelete: () => void;
}

export default function ReplyListModal({ visible, onClose, replies, onDelete }: ReplyListModalProps) {
  const handleDelete = async (id: string) => {
    try {
      await deleteCommentReply({ id });
      message.success('删除回复成功');
      onDelete();
    } catch (error) {
      message.error('删除回复失败');
    }
  };

  const columns: ColumnsType<CommentReply> = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '回复内容',
      dataIndex: 'content',
      key: 'content',
      width: 200,
    },
    {
      title: '回复时间',
      dataIndex: 'replytime',
      key: 'replytime',
      width: 160,
    },
    {
      title: '回复人信息',
      dataIndex: 'userInfo',
      key: 'userInfo',
      width: 250,
      render: (userInfo) => (
        <div>
          <p>用户名：{userInfo.nickName}</p>
          <p>邮箱：{userInfo.email}</p>
          <p>性别：{userInfo.gender === 0 ? '男' : '女'}</p>
          <p>城市：{userInfo.address}</p>
        </div>
      ),
    },
    {
      title: '被回复人信息',
      dataIndex: 'replyUserInfo',
      key: 'replyUserInfo',
      width: 250,
      render: (userInfo) => (
        <div>
          <p>用户名：{userInfo.nickName}</p>
          <p>邮箱：{userInfo.email}</p>
          <p>性别：{userInfo.gender === 0 ? '男' : '女'}</p>
          <p>城市：{userInfo.address}</p>
        </div>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render: (_, record) => (
        <Space size="middle">
          <Button type="link" danger onClick={() => handleDelete(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <Modal
      title="回复列表"
      open={visible}
      onCancel={onClose}
      width={1200}
      footer={null}
    >
      <Table
        columns={columns}
        dataSource={replies}
        rowKey="id"
        pagination={false}
        scroll={{ y: 400 }}
      />
    </Modal>
  );
} 